<template>
  <div class="warp">
    <div class="header-title">
      <h3>{{ rankingName }}</h3>
      <span class="time">{{ createTime }}</span>
      <span class="rules" @click="handleShow">榜单规则</span>
    </div>
    <div class="header-btn">
      <div class="btn">
        <button class="active" @click="handleSaveIndex">
          <a @click.prevent="playAll">播放全部</a>
        </button>
        <span class="iconfont icon-24gl-play active"></span>
      </div>
      <div class="btn">
        <button>添加到</button>
        <span class="iconfont icon-tianjiadao"></span>
      </div>
      <div class="btn">
        <button>下载</button>
        <span class="iconfont icon-xiazai"></span>
      </div>
      <div class="btn">
        <button>批量操作</button>
        <span class="iconfont icon-icon-piliangcaozuo"></span>
      </div>
      <div class="btn">
        <button>评论</button>
        <span class="iconfont icon-pinglun"></span>
      </div>
    </div>
    <div class="show-rules" v-if="isShow" @click="handleHide">
      <div>
        <br />
        <h3>榜单规则</h3>
        <p>{{ intro }}</p>
      </div>
      <span></span>
    </div>
  </div>
</template>
<script>
export default {
  name: 'RankingShowHeader',
}
</script>

<script setup>
import { ref, watch } from 'vue'
import { useRankingStore } from '@/store/modules/ranking.js'
import { formatDate } from '@/utils/ProcessingTimestamp.js'
import { useRouter } from 'vue-router'
const router = useRouter()
const rankingStore = useRankingStore()
let rankingName = ref('')
let createTime = ref('')
let intro = ref('')
let isShow = ref(false)
let currentIndex = ref(0)
watch(
  () => rankingStore.name,
  () => {
    rankingName.value = rankingStore.name
    createTime.value = formatDate(rankingStore.time)
    intro.value = rankingStore.intro
  }
)
rankingStore.$patch({
  isShow: isShow.value,
})
const handleSaveIndex = () => {
  rankingStore.$patch({
    currentIndex: currentIndex.value,
  })
}
// 显示规则
const handleShow = () => {
  isShow.value = true
}
// 隐藏规则;
const handleHide = () => {
  isShow.value = false
}

// 跳转到播放
const playAll = () => {
  localStorage.setItem('id', rankingStore.id)
  localStorage.setItem('Data', JSON.stringify(rankingStore.Data))
  localStorage.setItem('currentIndex', rankingStore.currentIndex)
  let routeData = router.resolve({
    name: 'SongList2',
  })
  window.open(routeData.href, '_blank')
}
</script>

<style scoped lang="less">
.warp {
  position: relative;
  .header-title {
    display: flex;
    height: 72px;
    align-items: center;
    h3 {
      font-size: 20px;
      font-weight: 500;
      line-height: 50px;
      padding: 0 20px;
      margin: 5px 0 11px;
    }
    span {
      line-height: 50px;
      font-size: 15px;
      padding-right: 10px;
    }
    .time {
      color: #777;
    }
  }
  .header-btn {
    width: 100%;
    display: flex;
    height: 40px;

    .btn {
      position: relative;
      margin-right: 10px;
      button {
        padding-left: 40px;
        padding-right: 40px;
        line-height: 38px;
        text-align: center;
        background-color: #fafafa;
        border: 1px solid #ccc;
        // box-sizing: border-box;
        &:hover {
          background-color: #ededed;
        }
      }
      button.active {
        background-color: #31c27c;
        color: #fff;
        &:hover {
          background-color: #2caf6f;
        }
      }
      span {
        position: absolute;
        top: 8px;
        left: 20px;
        color: #a2a2a2;
      }
      span.active {
        color: #fff;
      }
    }
  }
  .show-rules {
    width: 580px;
    border: 1px solid #ccc;
    position: absolute;
    top: 55px;
    left: 35px;
    z-index: 1;
    background-color: #fff;
    box-shadow: 0 0 4px rgb(0 0 0 / 35%);
    border-radius: 4px;
    box-sizing: border-box;
    div {
      margin: 30px 10px;
      h3 {
        margin-bottom: 20px;
        padding-left: 20px;
        font-size: 20px;
        line-height: 22px;
        font-weight: 500;
      }
      p {
        font-size: 14px;
        padding-left: 5px;
        line-height: 20px;
      }
    }
    span {
      position: absolute;
      top: -8px;
      left: 290px;
      width: 0px;
      height: 0px;
      border: 8px solid #fff;
      transform: rotate(45deg);
      border-right-color: transparent;
      border-bottom-color: transparent;
      box-shadow: -1px -1px 0px 1px rgb(0 0 0 / 12%);
    }
  }
}
</style>
